<?php 

include "../functions.php";

$data = include "./data.php";
if(IS_POST){
//获得提交的内容
  $data[] = $_POST;
  
  data_to_file($data, './data.php');
  //调用发表成功函数
  cheng('留言成功！','./liuyan.php');
}
 

 

 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>匆匆那年</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
     $(function(){
       $('.box').hover(function() {
        $(this).css({'width':'1190px'});
        $(this).find('.box2').stop().css({'z-index':'2','left':'40px','top':'10px','width':'360px','height':'251px'});
        $('.box .box2').find('img').stop().css({'width':'400px','height':'320px','left':'-20px','top':'-35px'});
        $('.box .box2').find('.gai').stop().css({'width':'300px','height':'195px','left':'30px','top':'26px'});
        
        $('.box .box2').find('.gai1').stop().css({'width':'300px','height':'195px','left':'30px','top':'26px'});
        $('div.box .box2 .gai1 .hang').stop().animate({'width':'300px'}, 300);
          $('div.box .box2 .gai1 .hang .p1').stop().animate({'width':'300px'}, 300);
          $('div.box .box2 .gai1 .hang .p2').stop().animate({'width':'300px'}, 300);

       	$(this).find('.box2').stop().animate({'left':'410px','top':'20px'}, 600);
       	$(this).find('.box3').stop().animate({'left':'820px','top':'20px'}, 600);
       }, function() {
        $(this).css({'width':'440px'});
        $('.box .box2').find('img').stop().animate({'width':'400px','height':'320px','left':'-20px','top':'-35px'}, 600);
        $('.box .box2').find('.gai').stop().animate({'width':'300px','height':'195px','left':'30px','top':'26px'}, 600);
        
        $('.box .box2').find('.gai1').stop().animate({'width':'300px','height':'195px','left':'30px','top':'26px'}, 600);
        $('div.box .box2 .gai1 .hang').stop().animate({'width':'300px'}, 600);
          $('div.box .box2 .gai1 .hang .p1').stop().animate({'width':'300px'}, 600);
          $('div.box .box2 .gai1 .hang .p2').stop().animate({'width':'300px'}, 600);



       	$(this).find('.box2').stop().animate({'z-index':'2','left':'40px','top':'10px','width':'360px','height':'251px'}, 600);
       	$(this).find('.box3').stop().animate({'left':'80px','top':'0px'}, 600);
       	
       });
       $('.hudie').animate({'left':'1170px','top':'15px'},15000);
       setInterval(function(){

        $('.hudie').animate({'left':'0px','top':'5px'},10000);
         setTimeout(function(){
            $('.hudie').animate({'left':'1170px','top':'15px'},10000);
          },10000);
        
       },20000);

      $('div.title .kuang').animate({'top':'110px'},5000);
      function run(){
          $('div.title .kuang').stop().animate({'top':'170px'},3000);
         setTimeout(function(){
            $('div.title .kuang').stop().animate({'top':'110px'},3000);
          },3000);
        
       }
      time1=setInterval(run,6000);
      var i=0;
      $('div.title .kuang').click(function() {
         
        if(i==0){
          $('div.big-box .write').show(300);
          i=1;
        }else if(i==1){
          $('div.big-box .write').hide(300);
          i=0;
        }
         
      });
      var r=0;
      $('div.box .box2').click(function() {
        if(r==0){
          $(this).stop().animate({'z-index':'9','width':'720px','height':'502px','left':'240px','top':'-100px'}, 300);
          $(this).find('img').stop().animate({'width':'800px','height':'640px','left':'-41px','top':'-70px'}, 300);
          $(this).find('.gai').stop().animate({'width':'600px','height':'390px','left':'60px','top':'52px'}, 300);
          $(this).find('.gai1').stop().animate({'width':'600px','height':'390px','left':'60px','top':'52px'}, 300);
          $('div.box .box2 .gai1 .hang').stop().animate({'width':'600px'}, 300);
          $('div.box .box2 .gai1 .hang .p1').stop().animate({'width':'600px'}, 300);
          $('div.box .box2 .gai1 .hang .p2').stop().animate({'width':'600px'}, 300);
          r=1;
        }else if(r==1){
          $(this).stop().animate({'z-index':'9','width':'360px','height':'251px','left':'410px','top':'20px'}, 300);
          $(this).find('img').stop().animate({'width':'400px','height':'320px','left':'-20px','top':'-35px'}, 300);
          $(this).find('.gai').stop().animate({'width':'300px','height':'195px','left':'30px','top':'26px'}, 300);
          $(this).find('.gai1').stop().animate({'width':'300px','height':'195px','left':'30px','top':'26px'}, 300);
          $('div.box .box2 .gai1 .hang').stop().animate({'width':'300px'}, 300);
          $('div.box .box2 .gai1 .hang .p1').stop().animate({'width':'300px'}, 300);
          $('div.box .box2 .gai1 .hang .p2').stop().animate({'width':'300px'}, 300);
          r=0;
        }
      });
      

     })
       
     
    </script>
	<style type="text/css">
     body{
     	background: url(images/vv.jpg);
     	
     }
     *{
     	padding: 0;
     	margin: 0;
     }
     a{text-decoration: none;}
     div.title{
     	position: relative;
     	width: 1190px;
     	height: 190px;
     	/*background: red;*/
     	margin: 0px auto;
     }
     div.title .xian{
      width: 7px;
      height: 100px;
      background: url(images/bjq.jpg);
      position: absolute;
      top:70px;right: 100px;
      border: solid 1px #572B12;

     }
     div.title .dian1{
      width: 20px;
      height: 20px;
      background:url(images/w1.jpg);
      position: absolute;
      top:70px;right: 94px;
      border: solid 1px #190100;
      z-index: 1;
      border-radius: 50%;
     }
     div.title .kuang{
       width: 130px;
       height:130px;
       background: url(images/pao.png) no-repeat -20px -20px;
       position: absolute;
       top:170px;right: 38px;
       z-index: 1;
       border-radius: 50%;
       /*border: solid 2px #5E3016;*/
     }
     div.title .kuang a{
      font-size: 26px;
      font-weight: 700;
      line-height: 130px;
      font-family: 微软雅黑;
      text-align: center;
      display: block;
      color: #C40000;
     }
     div.title img.i1{
     	width:666px;
     	height: 150px;
     	position: absolute;
     	left: 280px;top: 0px;

     }
     div.title img.i2{
     	/*width:666px;
     	height: 150px;*/
     	position: absolute;
     	left: 320px;top: 100px;
      opacity: 0.7;

     }
     div.big-box{
      width: 1190px;
      height: 274px;
      margin: 0px auto;
      position: relative;
      /*background: red;*/
     }
     div.big-box .box{
     	position: absolute;
      float: left;
     	width: 440px;
     	height: 274px;
     	z-index: 99;

     	/*background:green;*/
     	
     }
     div.big-box .write{
      width: 400px;
      height: 300px;
      position: absolute;
      top:105px;right: 0px;
      background: url(images/write.jpg) no-repeat 0px -150px;
      border: solid 2px #DA4100;
      border-radius: 5%;
      display: none;
      z-index: 3; 
     }
     div.big-box .write .cat{
      width: 75px;
      height: 45px;
      position: absolute;
      top: -47px;left: 60px;
      background: url(images/cat.png);
     }
     div.big-box .write h4.name{
     	margin-top: 10px;
     	margin-left: 10px;
     	display: block;
     	float: left;
     }
     div.big-box .write h4.content{
     	margin-top: 10px;
     	margin-left: 10px;
     	display: block;
     	float: left;
     }
     div.big-box .write input.name{
     	margin-top: 10px;
     	margin-left: 0px;
     	float: left;
     	border: solid 1px #000;
     	background: url(images/write.jpg) no-repeat 0px -80px;
     }
     div.big-box .write .nei{
     	margin-top: 10px;
     	width: 260px;
     	height: 180px;
     	border: solid 1px #000;
     	background: rgba(0,0,0,0);
     }
     div.big-box .write .tijiao{
     	background: url(images/vv.jpg);
     	font-size: 14px;
     	font-family: 微软雅黑;
     	font-weight: 400;
     	border-radius: 20px;
     	margin-top: 20px;
     	margin-left: 150px;
     	border: solid 1px #582F1D;
     	cursor: pointer;
     }
     div.box .box1{
       position: absolute;
       left: 0px;top: 20px;
       width: 360px;
       height: 251px;
       background: url(images/ww.jpg) no-repeat -20px -35px;
       border-radius: 10%;
       z-index: 1; 
     }
     div.box .box2{
       position: absolute;
       left: 40px;top: 10px;
       /*left: 410px;top: 20px;*/
       width: 360px;
       height: 251px;
       /*background: red;*/ 
       border-radius: 10%;
       overflow: hidden;
       z-index: 2;

     }
     div.box .box2 img{
     	position: absolute;
     	left: -20px;top: -35px;
     	/*left: -41px;top: -70px;*/
     	/*height:640px;width: 800px; */
     }
     div.box .box2 .xianshi{
     	position: absolute;
     	left: 30px;
     	top: 26px;
     	z-index: 3;
     	width:300px;
     	height: 195px;
     	background: rgba(0,0,0,0);
     	border: solid 1px green;
     	border: none;

     }
     div.box .box2 .gai{
     	position: absolute;
     	left: 30px;
     	top: 26px;
     	z-index: 2;
     	width:300px;
     	height: 197px;
     	background: #131313;
     	
     	/*background: rgba(0,0,0,0);*/
     }
     div.box .box2 .gai1{
     	position: absolute;
     	left: 30px;
     	top: 26px;
     	z-index: 5;
     	width:300px;
     	height: 195px;
     	/*background: green;*/
     	background: rgba(0,0,0,0);
      overflow: auto;
     }
     /*div.box .box2 .gai1 .mm{
      width: 300px;
      height: 100%;
      float: left;

     }*/
     div.box .box2 .gai1 .hang{
      width: 300px;
      float: left;

     }
     div.box .box2 .gai1 .hang .p1{
      width: 300px;
      font-size: 14px;
      font-weight: 700;
      font-family: 微软雅黑;
      float: left;
      color: white;
     }
     div.box .box2 .gai1 .hang .p2{
      width: 280px;
      font-size: 12px;
      font-weight: 400;
      font-family: 微软雅黑;
      float: left;
      color: white;
     }
     div.box .box2 .gai1 .hang .bian{
     	color: #8CBF00;
     }
     div.box .box2 .gai1 .hang .shan{
     	color: #E22C37;
     }
     div.box .box3{
       position: absolute;
       left: 80px;top: 0px;
       /*left: 820px;top: 20px;*/
       width: 360px;
       height: 251px;
       background: url(images/ww.jpg) no-repeat -20px -35px;; 
       border-radius: 10%;
       z-index: 3;
     }

     div.kis{
      width: 100px;
      height: 100px;
      position: fixed;
      left: 20px;bottom: 10px;
      
     }
     div.kis img{
      width: 100px;
      height: 100px;
     }
     div.hudie{
      width: 185px;
      height: 160px;
      position: absolute;
      left: 0px;top: 5px;
      overflow: hidden;
      z-index: 9;
      /*background: red;*/
     }

     div.big-box .cong{
      width: 500px;
      height: 200px;
      position: absolute;
      top: 160px;
      right: 150px;
      
      overflow: hidden;
     }











	</style>
</head>
<body>
  <!-- 标题字开始 -->
  <div class="title">
      <div class="kuang"><a href="javascript:void(0)">我要留言!</a></div>
      <div class="dian1"></div>
      <div class="xian"></div>
    	<img class="i1" src="images/1.png" alt="" />
    	<img class="i2" src="images/2.png" alt="" />
  </div>
  <!-- 标题字结束 -->

  <!-- 留言版开始 -->
  <div class="big-box">
    <div class="cong"><img src="images/cong.png" alt="" /></div>
    <div class="write">
       <div class="cat"></div>
       <h4 class="name">您的昵称:</h4>
       <form action="" method="post">
       	   <input type="text" class="name" name="nicheng"/>
       	   <br></br>
       	   <h4 class="content">您的留言:</h4>
       	   <textarea name="c" id="" class="nei" cols="30" rows="10"></textarea>
       	   <input class="tijiao" type="submit" value="我真的写好了!" />  
       </form>
       
    </div>
    <div class="box">
      <div class="box1"></div>
      <div class="box2">
      	<img src="images/ww.jpg" alt="" />
      	
      	<div class="gai"></div>
        <div class="gai1">

         
          <!-- <div class="mm"> -->
          <?php foreach($data as $k => $v): ?>
             <div class="hang">
               <p class="p1"><?php echo $v['nicheng'].':' ?></p>
               <p class="p2"><?php echo $v['c'] ?></p>
               <a href="./xiugai.php?id=<?php echo $k ?>" class="bian btn-primary btn-xs">编辑</a>
	 		   <a href="javascript:del(<?php echo $k ?>);" class="shan btn-danger btn-xs">删除</a>
             </div>
          <?php endforeach ?>   
          <!-- </div> -->
          
         

        </div>
      </div>
      <div class="box3"></div>
    </div>
  </div>   
	<!-- 留言板结束 -->
<script type="text/javascript">
 		function del(id){
// 			//确定删除吗？，点击确定就跳转
   			if(confirm('确定删除吗？')){
   				//跳转
   				location.href="./shan.php?id=" + id;
   			}
 		}
</script>


  <!-- 固定定位开始 -->
   <div class="kis">
     <img src="images/haizi.gif" alt="" />
   </div>
   <div class="hudie">
     <img src="images/hudie.gif" alt="" />
   </div>

  <!-- 固定定位结束 -->

	
</body>
</html>